<template>
  <div id="recent">
    <el-container>
      <el-main>
        <div>
          <el-carousel height="55px" direction="vertical" style="backgroundColor:#ffffff">
            <div
              style="display:flex;align-items:center;margin-left:20px;height:56px"
              v-if="news.length==0"
            >
              <el-row>
                <span class="normalWords">暂无更多消息</span>
              </el-row>
            </div>
            <el-carousel-item v-else v-for="item in news" :key="item.id">
              <div @click="goToNews" class="pointer">
                <el-container style="height:56px">
                  <el-main style="display:flex;align-items:center;margin-left:20px">
                    <el-row class="imgCol noHuanHang">
                      <i
                        class="iconfont iconxinbaniconshangchuan-"
                        style="font-size:25px;margin-right:10px;color:#409EFF"
                      ></i>
                      <span class="normalWords">系统消息：{{item.title}}——{{item.text}}</span>
                    </el-row>
                  </el-main>
                  <el-aside style="height:56px;width:300px">
                    <el-container>
                      <el-main class="imgCol" style="height:56px" width="60%">
                        <el-row class="noHuanHang">
                          <span style="font-size:12px;color:rgb(105, 110, 125)">{{item.datetime}}</span>
                        </el-row>
                      </el-main>
                      <el-aside class="imgCol" width="50px">
                        <el-row>
                          <span
                            style="color:rgb(105, 110, 125)"
                            class="normalWords pointer"
                            @click="goToNews"
                          >查看</span>
                        </el-row>
                      </el-aside>
                    </el-container>
                  </el-aside>
                </el-container>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div style="backgroundColor:#ffffff;margin-top:15px;height:180px">
          <div style="padding-left:20px;padding-top:40px;">
            <i
              class="iconfont icongaiyaoxinxi"
              style="font-size:25px;margin-right:10px;color:#409EFF;vertical-align:middle;"
            ></i>
            <span class="normalWords">
              账号概要：您已累计发布
              <span style="color:#F56C6C">{{gaiYao.info}}</span>条培训信息。新职通已累计为您对接务工人员
              <span style="color:#F56C6C">{{gaiYao.person}}</span>人！
            </span>
          </div>
          <el-container style="margin-top:20px">
            <el-aside width="50%" class>
              <el-row class="imgCol">
                <i
                  class="iconfont iconxinzeng pointer"
                  style="font-size:25px;margin-right:10px;color:#409EFF;"
                  @click="goToNews"
                ></i>
                <span class="pointer" @click="goToNews">新消息</span>
              </el-row>
              <el-row class="imgCol">
                <span style="font-size:30px" class="pointer" @click="goToNews">{{newNews}}</span>
              </el-row>
            </el-aside>
            <el-main>
              <el-row class="imgCol">
                <i
                  class="iconfont iconxinzengzuyuan pointer"
                  style="font-size:25px;margin-right:10px;color:#409EFF;"
                ></i>
                <span class="pointer">新增报名</span>
              </el-row>
              <el-row class="imgCol">
                <span class="pointer" style="font-size:30px">{{newPeopel}}</span>
              </el-row>
            </el-main>
          </el-container>
        </div>
        <div style="backgroundColor:#ffffff;margin-top:15px" id="recentEditHeight">
          <div style="padding-left:20px;padding-top:40px;">
            <i
              class="iconfont iconbianji"
              style="font-size:25px;margin-right:10px;color:#409EFF;vertical-align:middle;"
            ></i>
            <span class="normalWords">最近编辑</span>
          </div>
          <el-container
            v-if="haveRecent===false"
            style="border:1px solid #F0F0F0;height:150px;margin:10px 20px 10px 20px"
          >
            <el-main>
              <el-container>
                <el-header>
                  <el-tag>培训</el-tag>
                </el-header>
                <el-main class="imgCol">
                  <span style="font-size:14px;">暂无最近培训</span>
                </el-main>
              </el-container>
            </el-main>
            <el-aside class="imgCol" width="80px">
              <el-row>
                <el-tooltip effect="dark" content="新增" placement="bottom">
                  <el-button type="primary" circle icon="iconfont iconbianji" @click="goToAdd"></el-button>
                </el-tooltip>
              </el-row>
            </el-aside>
          </el-container>
          <el-container
            v-else
            style="border:1px solid #F0F0F0;height:150px;margin:10px 20px 10px 20px"
          >
            <el-main>
              <el-container>
                <el-header>
                  <el-tag>培训</el-tag>
                </el-header>
                <el-main>
                  <el-row>
                    <el-col :span="12" :offset="2">
                      <span style="font-size:14px">{{recentInfo.name}}</span>
                    </el-col>
                    <el-col :span="6" v-if="recentInfo.state==='待审核'">
                      <i class="el-icon-s-check" style="color:#fd034f"></i>
                      <span style="color:#fd034f;margin-left: 10px;font-size:14px">待审核</span>
                    </el-col>
                    <el-col :span="6" v-else-if="recentInfo.state==='已下架'">
                      <i class="iconfont iconxiajia" style="color: #D0D0D0"></i>
                      <span style="color:#D0D0D0;margin-left: 10px;font-size:14px">已下架</span>
                    </el-col>
                    <el-col :span="6" v-else>
                      <i class="el-icon-time"></i>
                      <span style="margin-left: 10px;font-size:14px">{{recentInfo.publishTime }}</span>
                    </el-col>
                    <el-col :span="4">
                      报名量：
                      <i class="el-icon-s-custom"></i>
                      <span
                        style=";font-size:14px"
                      >{{recentInfo.enrollPopulation}}/{{recentInfo.requirePopulation}}</span>
                    </el-col>
                  </el-row>
                </el-main>
              </el-container>
            </el-main>
            <el-aside class="imgCol" width="80px">
              <el-row>
                <el-tooltip effect="dark" content="新增" placement="bottom">
                  <el-button type="primary" circle icon="iconfont iconbianji" @click="goToAdd"></el-button>
                </el-tooltip>
              </el-row>
            </el-aside>
          </el-container>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      haveRecent: false,
      news: [],
      gaiYao: {
        info: 0,
        person: 0
      },
      newPeopel: 0,
      newNews: 0,
      recentInfo: {
        // title:'低压电工——第一课次',
        // state:'待审核',
        // enroll:0,
        // all:200,
        // publishTime:'2019-08-01 16:40 '
      }
    };
  },
  mounted() {
    var body = document.getElementById("recent");
    var height = document.documentElement.clientHeight - 120;
    body.style.height = height + "px";

    var recentBody = document.getElementById("recentEditHeight");
    var recentHeight = height - 266;
    recentBody.style.height = recentHeight + "px";
    console.log(height);

    this.getNewsSwipe();
    this.getGaiYao();
    this.getNewNews();
    this.getRecentEdit();
  },
  methods: {
    //获取新消息轮播
    getNewsSwipe() {
      var URL = this.IP + "/message/newestSystemMessage";
      console.log(URL);

      this.$ajax({
        method: "get",
        url: URL,
        params: {
          size: 5
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.news = response.data.data;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //获取账号概要信息
    getGaiYao() {
      var URL = this.IP + "/organUserInfo/trainOrganAccountView";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.gaiYao.info = response.data.data.trainClassTimeCount;
            this.gaiYao.person = response.data.data.peopleCount;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //获取新增培训报名人数
    getNewPeopel() {
      var URL = this.IP + "/train/trainClassNewEnroll";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.newPeopel = response.data.data;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //获取新消息数量
    getNewNews() {
      var URL = this.IP + "/message/numberOfSystemMessages";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.newNews = response.data.data;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    goToNews() {
      this.$router.push({
        path: "/home/systemNews"
      });
    },
    //获取最近的编辑
    getRecentEdit() {
      var URL = this.IP + "/train/recentEditorTrainClassTime";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.recentInfo = response.data.data;
            this.haveRecent = true;
          } else {
            this.haveRecent = false;
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    goToAdd() {
      var URL = this.IP + "/train/trainSaved";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          var data = response.data.data;
          if (code == 0) {
            this.$confirm("上次还有未完成的编辑，是否继续？", "提示", {
              confirmButtonText: "继续",
              cancelButtonText: "不了，重新编辑",
              type: "warning"
            })
              .then(() => {
                //save==1表示继续上次的编辑
                this.$router.push({
                  path: "/home/addTrain",
                  query: {
                    save: 1
                  }
                });
              })
              .catch(() => {
                this.$router.push({
                  path: "/home/addTrain",
                  query: {
                    save: 0
                  }
                });
              });
          } else {
            this.$router.push({
              path: "/home/addTrain",
              query: {
                save: 0
              }
            });
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    goToNews() {
      this.$router.push({
        path: "/home/systemNews"
      });
    }
  }
};
</script>
<style>
#recent {
  /* height:600px; */
  /* background-color:#fff; */
  margin: 15px;
  border-radius: 5px;
}
.imgCol {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-header,
.el-main,
.el-footer,
.el-aside {
  padding: 0px;
}
.noHuanHang {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.normalWords {
  font-size: 14px;
}
.pointer {
  cursor: pointer;
}
</style>